import React, { Component } from 'react';
import * as echarts from 'echarts';
import '../Order_summarace/index.css'
class Order_summarace extends Component {

    componentDidMount() {
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        var option;
        var colors = ['#EE6666', '#5470C6'];
        option = {
            title: {
                text: '订单金额与数量'
            },
            color: colors,
            tooltip: {
                trigger: 'none',
                axisPointer: {
                    type: 'cross'
                }
            },
            legend: {},
            grid: {
                top: 70,
                bottom: 50
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return (
                                    '订单数量  ' +
                                    params.value +
                                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                                );
                            }
                        }
                    },
                    // prettier-ignore
                    data: ['2016-1', '2016-2', '2016-3', '2016-4', '2016-5', '2016-6', '2016-7', '2016-8', '2016-9', '2016-10', '2016-11', '2016-12']
                },
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLine: {
                        onZero: false,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisPointer: {
                        label: {
                            formatter: function (params) {
                                return (
                                    '订单金额  ' +
                                    params.value +
                                    (params.seriesData.length ? '：' + params.seriesData[0].data : '')
                                )
                            }
                        }
                    },
                    // prettier-ignore
                    data: ['2015-1', '2015-2', '2015-3', '2015-4', '2015-5', '2015-6', '2015-7', '2015-8', '2015-9', '2015-10', '2015-11', '2015-12']
                }
            ],
            yAxis: [
                {
                    type: 'value'
                }
            ],
            series: [
                {
                    name: '订单金额',
                    type: 'line',
                    xAxisIndex: 1,
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [
                        2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                    ]
                },
                {
                    name: '订单数量',
                    type: 'line',
                    smooth: true,
                    emphasis: {
                        focus: 'series'
                    },
                    data: [
                        3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3, 0.7
                    ]
                }
            ]
        }
        option && myChart.setOption(option);
    }

    state = {
        orderList: [{
            "num": "4",
            "title": "订单数量"
        }, {
            "num": "2",
            "title": "待付款"
        }, {
            "num": "1",
            "title": "待发货"
        }, {
            "num": "0",
            "title": "待评价"
        }, {
            "num": "0",
            "title": "维权中"
        }, {
            "num": "1",
            "title": "今日下单量"
        }, {
            "num": "0",
            "title": "今日订单金额"
        }]
    }

    render() {
        const { orderList } = this.state
        return (
            <div className="order_summarace">
                <div className="order_sum_header">
                    {
                        orderList.map((item, index) => <p key={index}>
                            <span>
                                {item.num}
                                <br />
                                {item.title}
                            </span>
                        </p>)
                    }
                </div>
                <div className='order_three'>
                    <div id="main" style={{ width: 1050, height: 425 }}></div>
                </div>
            </div>
        )
    }
}

export default Order_summarace;
